﻿<html xmlns="http://www.w3.org/1999/xhtml">
<head >
	<meta http-equiv="Content-Type" content="text/html;" charset="utf-8" />
    <title>Test SHP</title>
      <link rel="stylesheet" type="text/css" href="openlayers-2.8/theme/default/style.css" />

    <!-- khai bao layout -->
<link rel="stylesheet" type="text/css" href="layout/css/ext-all.css"/>
<script type="text/javascript" src="layout/ext-base.js"></script>
<script type="text/javascript" src="layout/ext-all.js"></script>
<script type="text/javascript" src="js/ajax.js"></script>
<script type="text/javascript">
	Ext.onReady(function(){
            var viewport = new Ext.Viewport({
                layout:'border',
				items:[
					{
					region:'west',
					split: true,
					height: 400,
					width: 300,
					minSize: 175,
                	maxSize: 400,
                	collapsible: true,
					margins:'5 0 5 5',
                	//bodyStyle:'background:#f1f1f1',
			    	//layout: 'border',
					layoutConfig:{
                    	animate:true
                	},
					autoScroll: false,
					items: [
							new Ext.TabPanel({
								border:false,
								activeTab:0,
								tabPosition:'top',
								autoScroll:false,
								items:[
								{
									//applyTo: 'search',
									contentEl: 'search',
									title: 'Tìm kiếm',
									autoScroll:false,
									iconCls: 'btsearch'
								},
								{
									//html:'<img src="images/v_chugiai.gif"/>',
									contentEl: 'chugiai',
									title: 'Chú giải',
									autoScroll:false,
									iconCls: 'btlegend',
									//listeners: {activate:handleActivate}
									listeners: {activate: displayLegend}
								}
								]
					})
					]
					},
					{
                    region:'center',
                    margins:'5 5 5 0',
					split:true,
					collapsible: true,
                    bodyStyle:'background:#f1f1f1',
					contentEl: 'map'
                	}
				]
            });
			function handleActivate(tab){
				alert(detailsPanel.title + " actived.");
				detailsPanel.disabled  = true;
			};
			function displayWindow(){
				 if(!win){
            		win = new Ext.Window({
					//el:'hello-win',
					layout:'fit',
					width:600,
					height:400,
					closeAction:'hide',
					plain: true,
					html: 'chi tiết'
					});
				}
				win.show(this);
			};
			function displayLegend(){
				document.getElementById('chugiai').style.visibility='visible';
			};
	});
</script>
<style type="text/css">
#map { width:100%; height:100%}
#footer {
	background-image:url(images/footer.gif);
	background-repeat:repeat-x;
	font-family:Arial, Helvetica, sans-serif;
	font-size:11px;
	color:#FF9900;
	text-align:center;
	height: 50px;
	padding-top: 10px;
}
#message_measure{
	float:right;
	padding-top:0px;
	z-index:1000;
	padding-right: 0px;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	color:#FF0000;
}

.btsearch{
	background-image:url(images/btn-search.gif) !important;
}
.btchart{
	background-image:url(images/btn_chart.gif) !important;
}
.btlegend{
	background-image:url(images/btn-legend.gif) !important;
}
.search{ font-family: Verdana, Arial, Helvetica, sans-serif;
		font-size: 12px;
}
.ketqua{ font-family: Verdana, Arial, Helvetica, sans-serif;
		font-size: 12px; font-weight:bold; color:#FFFFFF;
}
.delete{ font-family: Verdana, Arial, Helvetica, sans-serif;
		font-size: 12px; font-weight:bold; color:#FF0000;
		text-decoration:none;
}
.khongthay{ font-family: Verdana, Arial, Helvetica, sans-serif;
		font-size: 12px; font-weight:bold; color:#FF0000;
}
.tieude{font-family: Verdana, Arial, Helvetica, sans-serif;
		font-size: 12px; font-weight:bold; color:#000099;
}
.noidungketqua{font-family: Verdana, Arial, Helvetica, sans-serif;
		font-size: 12px; text-decoration:none;
}
</style>
<script type="text/javascript" src="openlayers-2.8/OpenLayers.js"></script>
<script type="text/javascript">
OpenLayers.Util.onImageLoadErrorColor = "transparent";
var lon =600941	;
var lat =1194078;
var zoom = 2;
var wms_host = "http://localhost/cgi-bin/mapserv.exe?map=/ms4w/apps/gisdemo/map/q5.map";
var map;
var layer_hanhchinhxa;
var popup;


function init(){
	// ----------------Seting up optional--------------------------
	var mapOptions = {
		//maxExtent: khoanh vung hien thi ban do
	    //maxExtent: new OpenLayers.Bounds(571070,1144612,625697,1250311),
		maxExtent: new OpenLayers.Bounds(680000,1188296,690240,1190400),
		maxResolution: 20,//602051/8192,
		projection:"EPSG:4236",
		units: "m",
		numZoomLevels: 10,
		controls: []
	};
	map = new OpenLayers.Map('map',mapOptions);


	// ----------------Add layers--------------------------
    //var base = new OpenLayers.Layer("Lop nen",{isBaseLayer: true, displayInLayerSwitcher: false});
 	//map.addLayer(base);

	var layer_basic = new OpenLayers.Layer.WMS(
		"Basic",
		wms_host,
		{layers: 'districts,ward,road_chinh,road_phu,road_conluong,rivers',format: 'image/gif'},
		{isBaseLayer: true}
	);
	
	var tileCacheBaseMap = new OpenLayers.Layer.WMS(
		"Cached Base map",
		"http://localhost/gisdemo/tilecache-2.10/tilecache.cgi?",
		{layers: 'basemap',	format: 'image/png'},
		{isBaseLayer: true}
	);
	// Overlay layers
	var layer_boundarydistricts = new OpenLayers.Layer.WMS(
		"Ranh gioi quan",
		wms_host,
		{layers: 'boundarydistricts',transparent: "true",format: 'image/gif'}
	);
	var layer_boundarywards = new OpenLayers.Layer.WMS(
		"Ranh gioi phuong",
		wms_host,
		{layers: 'boundarywards',transparent: "true",format: 'image/gif'}
	);
	
    //map.addLayers([tileCacheBaseMap,layer_boundarydistricts,layer_boundarywards]);
	map.addLayers([tileCacheBaseMap]);

	// ----------------Add Controls--------------------------
	var panel = new OpenLayers.Control.Panel({displayClass: 'olControlEditingToolbar'});

	map.addControl(new OpenLayers.Control.Navigation());
	map.addControl(new OpenLayers.Control.LayerSwitcher());
	map.addControl(new OpenLayers.Control.PanZoomBar({'zoomWorldIcon': true}));
	panel.addControls([
		new OpenLayers.Control.Navigation({'zoomWheelEnabled':false}),
		new OpenLayers.Control.ZoomBox({'alwaysZoom':true})
		]);
	map.addControl(panel);

	map.addControl(new OpenLayers.Control.MousePosition({numdigits:2}));
	map.addControl(new OpenLayers.Control.ScaleLine());
	map.addControl(new OpenLayers.Control.Scale());

	// Add overview have mapOptions like mapOptions
	// Khong duoc chua tuy chon controls cua mapOption trong overviewOption
	var overviewOptions = {
			mapOptions: {
				//maxExtent: new OpenLayers.Bounds(571070,1144612,625697,1250311),
				maxExtent: new OpenLayers.Bounds(680000,1188296,690240,1190400),
				maxResolution: 20,
				projection:"EPSG:4236",
				units: "m",
				numZoomLevels: 10
			},
			layers: layer_hanhchinhxa
	}
	var overview = new OpenLayers.Control.OverviewMap(overviewOptions);
	map.addControl(overview);
	overview.maximizeControl();
//if (!map.getCenter()) map.zoomToMaxExtent();
	map.setCenter(new OpenLayers.LonLat(lon, lat), zoom);

}



    </script>
</head>

<body onLoad="init();">


 <div id="message_measure" style="display:none; position:absolute; z-index:1000; bottom:07px; right:150px; background-color:#0000FF"> Khoảng cách: </div>
	<div id="test" style=" position:absolute; z-index:1000; bottom:07px; right:150px; background-color:#0000FF"> </div>
    <div id="search">

     <div id="formsearch">
   	    <form action="server"  method="get"   enctype="multipart/form-data" name="frmSearch" target="_top" style="background-color:#fbfbfb" >
        	<p>&nbsp;</p>
            <span class="search"> Từ khóa:</span>
 	  		<span style="padding-left:18px;"><input name="txtSearch" id="txtSearch">
		 	<input  name="btSearch" type="button" value="Tìm" onClick="search();" style="width: 57px"></span>
           <br />
		 	 <span class="search">Chuyên đề:</span>
           <select id="Select1" style="width: 145px">
               <option>Đài trạm</option>
               <option>Cáp đồng</option>
               <option>Cáp quang</option>
               <option>Tủ cáp</option>
           </select>
            <p>&nbsp;</p> <span onclick="queryLayer('79785')" style="cursor:pointer;"></span>
        </form>
     </div>
     <div id="result" style="height:400px">
           <p></p>
     </div>

	</div>

	<div style="display:none">
        <div id="map"></div>
	</div>
  <div id="chugiai" style=" visibility:hidden">
		<div onclick="submitLayer()">
			<form name="layer" id="layer" action="none">
 <p><fieldset>
  <legend>Block 1</legend>
  <input type="radio" name="appr1c" value="1" />Dai Tram
  <input type="radio" name="appr1c" value="2" />Tru dien
  <input type="radio" name="appr1c" value="3" />Soi Cap Dong
  <input type="radio" name="appr1c" value="3" />Soi Cap Quang
 </fieldset></p>
</form>
		</div>
	</div>
</body>
</html>
